<template>
  <div class="wrap-container">
    <div class="flex">
      <div class="detail_l">
        <div class="bg-white py-3 px-4">
          <div class="flex justify-between">
            <div class="manage_tit">
              <div class="line"></div>
              <p>{{ getTitle() }}审核详情</p>
            </div>
            <div class="approval_btn">
              <template v-if="couponData.conditionAudit == 0">
                <template v-hasPermi="['sys:approval:btn_couPub_approval']">
                  <el-button type="primary" @click="approveVisible = true">通过</el-button>
                  <el-button type="warning" @click="handleRejects">驳回</el-button>
                </template>
              </template>
              <el-button @click="goBack">返回</el-button>
            </div>
          </div>
        </div>
        <div class="block_item" v-loading="isLoading">
          <div class="opacity-60">
            <div class="block_top">
              <p>{{ getTitle() }}基本信息</p>
            </div>
            <div class="block_cont px-4">
              <el-row>
                <el-col :span="5">
                  <div>
                    <p>
                      <span>{{ getTitle() }}编码：</span>{{ couponData.code }}
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p>
                      <span>{{ getTitle() }}类型 ：</span>{{ handleCouponsType(couponData.type) }}
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p class="flex">
                      <span>{{ getTitle() }}名称：</span
                      ><el-tooltip
                        class="item"
                        effect="dark"
                        :content="couponData.name"
                        placement="top"
                      >
                        <span
                          class="tool_text flex-1 overflow-ellipsis whitespace-nowrap overflow-hidden"
                          >{{ couponData.name }}</span
                        >
                      </el-tooltip>
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p class="flex items-center">
                      <span>渠道备注：</span
                      ><el-tooltip
                        class="item"
                        effect="dark"
                        :content="couponData.mname"
                        :disabled="couponData.mname == ''"
                        placement="top"
                      >
                        <span
                          class="tool_text flex-1 overflow-ellipsis whitespace-nowrap overflow-hidden"
                          >{{ couponData.mname }}</span
                        >
                      </el-tooltip>
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p class="flex items-center">
                      <span>场馆备注：</span
                      ><el-tooltip
                        class="item"
                        effect="dark"
                        :content="couponData.bname"
                        :disabled="couponData.bname == ''"
                        placement="top"
                      >
                        <span
                          class="tool_text flex-1 overflow-ellipsis whitespace-nowrap overflow-hidden"
                          >{{ couponData.bname }}</span
                        >
                      </el-tooltip>
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p><span>发布渠道：</span>{{ handleSourceType(couponData.sourceType) }}</p>
                  </div>
                </el-col>
                <el-col :span="5" v-if="couponData.type == '1' || couponData.type == '3'">
                  <div>
                    <p>
                      <span>优惠券面值：</span>
                      {{ couponData.faceValue }}元
                      <span class="text-color-D43030" v-if="couponData.faceValueStatus === '1'"
                        >（改）</span
                      >
                    </p>
                  </div>
                </el-col>
                <el-col :span="5" v-if="type == '0' && couponData.type == '3'">
                  <div>
                    <p>
                      <span>使用条件：</span>
                      订单满{{ couponData.thresholdAmount }}元可用
                    </p>
                  </div>
                </el-col>
                <template v-if="type == '1'">
                  <el-col :span="5">
                    <div>
                      <p>
                        <span>卡券类型：</span>
                        <template v-if="couponData.type == '1'">次卡</template>
                        <template v-else-if="couponData.type == '2'">周卡</template>
                        <template v-else-if="couponData.type == '3'">月卡</template>
                      </p>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <div>
                      <p><span>使用次数：</span>{{ couponData.totalCount }}</p>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <div>
                      <p><span>每天限次：</span>{{ couponData.dailyLimit }}</p>
                    </div>
                  </el-col>
                </template>
                <el-col :span="5" v-if="(type == '0' && couponData.type == '2') || type == '1'">
                  <div>
                    <p>
                      <span>可抵扣时长：</span
                      >{{ couponData.freeHours ? `${couponData.freeHours}小时` : '--' }}
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p><span>操作员：</span>{{ couponData.createUserName }}</p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p><span>创建日期：</span>{{ couponData.createTime }}</p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p><span>其他说明：</span>{{ couponData.remark || '无' }}</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="detail_item" v-for="(item, index) in resultList" :key="index">
            <div class="block_top">
              <p class="mt-14px">
                优惠券发布信息<span v-if="index > 0"
                  >（{{
                    index == 0
                      ? '新'
                      : index != resultList.length - 1
                        ? '修改' + (resultList.length - index - 1)
                        : '原'
                  }}）</span
                >
              </p>
            </div>
            <div class="block_cont px-4">
              <p class="text-sm text-custom-main mb-4">
                领取方式：{{ handleLimitType(item.limitType) }}
              </p>
              <el-row class="flex flex-wrap">
                <el-col :span="5" v-if="item.limitType != '3'">
                  <div>
                    <p>
                      <span>发放数量：</span>
                      {{ item.total }}
                      <span class="text-color-D43030" v-if="item.totalStatus === '1'">（改）</span>
                    </p>
                  </div>
                </el-col>
                <el-col :span="5" v-if="item.limitType != '3'">
                  <div>
                    <p><span>每人限领：</span>{{ item.limitUserTotal }}张</p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <div class="flex">
                      <span>有效期：</span>
                      <template v-if="item.lifespanType == 1">
                        <p class="flex-1">
                          <span class="tool_text">
                            {{ item.lifespanDay == 0 ? '--' : `领券当日${item.lifespanDay}天有效` }}
                          </span>
                          <span class="text-color-D43030" v-if="item.lifespanDayStatus === '1'"
                            >（改）</span
                          >
                        </p>
                      </template>
                      <template v-else-if="item.lifespanType == 2">
                        <p class="flex">
                          <span class="flex-1 tool_text">
                            {{ item.lifespanStartTime }}至
                            <i class="block not-italic">{{ item.lifespanEndTime }}</i>
                          </span>
                          <span
                            class="text-color-D43030"
                            v-if="
                              item.lifespanStartTimeStatus === '1' ||
                              item.lifespanEndTimeStatus === '1'
                            "
                            >（改）</span
                          >
                        </p>
                      </template>
                    </div>
                  </div>
                </el-col>
                <template v-if="item.limitType == '3'">
                  <el-col :span="5">
                    <div>
                      <p>
                        <span>兑换码数量：</span>{{ item.total }}
                        <span class="text-color-D43030" v-if="item.totalStatus === '1'"
                          >（改）</span
                        >
                      </p>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <div>
                      <p><span>兑换码长度：</span>{{ item.codeLen }}</p>
                    </div>
                  </el-col>
                </template>
                <el-col :span="5">
                  <div>
                    <p>
                      <span>适用场馆：</span>
                      {{ item.applyStadiumType == 1 ? '全部场馆' : '指定场馆' }}
                      <span class="text-color-D43030" v-if="item.applyStadiumTypeStatus === '1'"
                        >（改）</span
                      >
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p>
                      <span>适用类型：</span>
                      {{ item.applySportType == 1 ? '全部类型' : '指定类型' }}
                      <span class="text-color-D43030" v-if="item.applySportTypeStatus === '1'"
                        >（改）</span
                      >
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p>
                      <span>适用时间：</span>
                      <template v-if="item.limitTimeType == 1">
                        全部时间
                        <span class="text-color-D43030" v-if="item.limitTimeTypeStatus === '1'"
                          >（改）</span
                        >
                      </template>
                      <template v-else>
                        {{ `${item.limitStartTime}-${item.limitEndTime}不可用` }}
                        <span
                          class="text-color-D43030"
                          v-if="
                            item.limitTimeTypeStatus === '1' ||
                            item.limitStartTimeStatus === '1' ||
                            item.limitEndTimeStatus === '1'
                          "
                          >（改）</span
                        >
                      </template>
                    </p>
                  </div>
                </el-col>
                <template v-if="item.limitType == '5'">
                  <el-col :span="5">
                    <div>
                      <p>
                        <span>热门推荐：</span>{{ item.hotEnable == 1 ? '开启' : '关闭' }}
                        <span class="text-color-D43030" v-if="item.hotEnableStatus === '1'"
                          >（改）</span
                        >
                      </p>
                    </div>
                  </el-col>
                  <el-col :span="5" v-if="item.hotEnable == 1">
                    <div>
                      <p>
                        <span>展示顺序：</span>{{ item.hotSort }}
                        <span class="text-color-D43030" v-if="item.hotSortStatus === '1'"
                          >（改）</span
                        >
                      </p>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <div>
                      <p>
                        <span>过期自动退款：</span>{{ item.expiredRefund == 1 ? '开启' : '关闭' }}
                        <span class="text-color-D43030" v-if="item.expiredRefundStatus === '1'"
                          >（改）</span
                        >
                      </p>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <div>
                      <p>
                        <span>购买金额：</span>{{ item.purchaseAmount }}元
                        <span class="text-color-D43030" v-if="item.purchaseAmountStatus === '1'"
                          >（改）</span
                        >
                      </p>
                    </div>
                  </el-col>
                </template>
                <el-col :span="5">
                  <div>
                    <p>
                      <span>采购价：</span>
                      <template v-if="item.purchasePrice">{{ item.purchasePrice }}元</template>
                      <template v-else>——</template>
                      <span class="text-color-D43030" v-if="item.purchasePriceStatus === '1'"
                        >（改）</span
                      >
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p>
                      <span>市场价：</span>
                      <template v-if="item.marketPrice">{{ item.marketPrice }}元</template>
                      <template v-else>——</template>
                      <span class="text-color-D43030" v-if="item.marketPriceStatus === '1'"
                        >（改）</span
                      >
                    </p>
                  </div>
                </el-col>
                <el-col :span="5" v-if="item.limitType != '1' && item.limitType != '5'">
                  <div>
                    <p>
                      <span>客户价 ：</span>
                      <template v-if="item.customerPrice">{{ item.customerPrice }}元</template>
                      <template v-else>——</template>
                      <span class="text-color-D43030" v-if="item.customerPriceStatus === '1'"
                        >（改）</span
                      >
                    </p>
                  </div>
                </el-col>
                <el-col :span="5" v-if="item.limitType == '3'">
                  <div>
                    <p><span>发放对象：</span>{{ item.dealerName }}</p>
                  </div>
                </el-col>
                <el-col :span="5" v-if="item.limitType == '2'">
                  <div>
                    <p>
                      <span>适用群体：</span
                      >{{ couponData.limitType == '2' ? '指定用户' : '全部用户' }}
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p>
                      <span>操作员：</span>
                      {{ item.createApplyName }}
                      <span class="text-color-D43030" v-if="item.createApplyNameStatus === '1'"
                        >（改）</span
                      >
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p><span>创建时间：</span>{{ item.createTime }}</p>
                  </div>
                </el-col>
              </el-row>
              <div class="text-sm">
                <p class="text-custom-blue mb-4">成本统计</p>
                <el-row>
                  <el-col :span="8" class="mb-2.5" v-if="type != '1' && couponData.type != '2'">
                    <p>
                      <span class="text-custom-blue"
                        >发放额总计：{{ item.totalMoney || '——' }}</span
                      >
                      <span class="ml-2 text-xs text-custom-grey"
                        >计算公式：{优惠券金额}x{每人限领}x{发放数量}</span
                      >
                    </p>
                  </el-col>
                  <el-col :span="8" class="mb-2.5">
                    <p>
                      <span class="text-custom-blue"
                        >采购价总计：{{ item.purchaseMoney || '——' }}</span
                      >
                      <span class="ml-2 text-xs text-custom-grey"
                        >计算公式：{采购价金额}x{每人限领}x{发放数量}</span
                      >
                    </p>
                  </el-col>
                  <el-col :span="8" class="mb-2.5">
                    <p>
                      <span class="text-custom-blue"
                        >市场价总计：{{ item.marketMoney || '——' }}</span
                      >
                      <span class="ml-2 text-xs text-custom-grey"
                        >计算公式：{市场价金额}x{每人限领}x{发放数量}</span
                      >
                    </p>
                  </el-col>
                  <el-col :span="8" v-if="item.limitType != '1' && item.limitType != '5'">
                    <p>
                      <span class="text-custom-blue"
                        >客户价总计：{{ item.customerMoney || '——' }}</span
                      >
                      <span class="ml-2 text-xs text-custom-grey"
                        >计算公式：{客户价金额}x{每人限领}x{发放数量}</span
                      >
                    </p>
                  </el-col>
                </el-row>
              </div>
              <div
                class="other_cont text-sm mt-2.5"
                v-if="
                  item.applyStadiumType == 2 || item.applySportType == 2 || item.limitType == '2'
                "
              >
                <div class="mb-4" v-if="item.applyStadiumType == 2">
                  <p class="text-custom-blue mb-2.5">*指定场馆：({{ item.countStadiumNumber }})</p>
                  <p>
                    {{ item.stadiumNameList }}
                    <span v-if="item.stadiumNameList != '' && item.diffStadiumNameList != ''"
                      >、</span
                    >
                    <span class="text-custom-blue">{{ item.diffStadiumNameList }}</span>
                  </p>
                </div>
                <div class="mb-4" v-if="item.applySportType == 2">
                  <p>
                    <span class="text-custom-blue">*指定类型：</span>{{ item.sportTypeNameList }}
                  </p>
                </div>
                <div v-if="item.limitType == '2'">
                  <p class="text-custom-blue mb-2.5">*指定用户：({{ item.countCouponsUser }})</p>
                  <el-button type="primary" @click="handleExportUser(item)">查看导入</el-button>
                </div>
              </div>
              <div class="other_cont text-sm mt-2.5" v-if="index == 0 && item.limitType == '3'">
                <el-button type="primary" @click="handleLookCode(item)">查看兑换码</el-button>
              </div>
              <div class="other_cont text-sm mt-2.5" v-if="index == 0 && item.limitType == '4'">
                <el-button type="primary" @click="handleQrCode(item)">查看二维码</el-button>
                <el-button type="primary" @click="handleActivityImage(item)">查看活动图</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail_r">
        <div class="order_track">
          <div class="order_top">
            <div class="manage_tit">
              <div class="line"></div>
              <p>优惠券审批流程</p>
            </div>
          </div>
          <div class="track_list">
            <div class="track_item" v-for="item in recordList" :key="item.id">
              <p class="create_time">{{ item.createTime }}</p>
              <div class="track_cont">
                <p v-if="item.type == null">{{ item.userName }} {{ item.stepName }}</p>
                <template v-else>
                  <p>
                    {{ item.userName }}
                    <span class="text-color-808080">审核</span>
                    <span :style="{ color: item.stepColor }">{{
                      item.type == 1 ? '通过' : '驳回'
                    }}</span>
                  </p>
                  <p class="text-color-808080 text-xs mt-2px" v-if="item.type == 2">
                    说明：{{ item.stepName }}
                  </p>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 通过 -->
    <el-dialog
      v-model="approveVisible"
      width="439px"
      append-to-body
      :close-on-click-modal="false"
      :show-close="false"
      custom-class="dialog_center"
    >
      <template #header>
        <div class="dialog_top">
          <img src="@/assets/images/icon/dialog_warn.png" />
          <span>是否确认通过该{{ getTitle() }}的审批？</span>
        </div>
      </template>
      <div>
        <div class="tips_cont">
          <div>您即将发布以下{{ getTitle() }}设置，该操作不可撤销，请仔细核对：</div>
          <p class="mt-4">核心参数</p>
          <p>
            <span class="dian"></span>券类型：{{ handleCouponsType(couponData.type) }}—{{ total }}张
          </p>
          <template v-if="type == '0' && (couponData.type == '1' || couponData.type == '3')">
            <p><span class="dian"></span>面值：{{ couponData.moneyAmount }}元</p>
          </template>
          <template v-else>
            <p v-if="couponsResult.marketPrice">
              <span class="dian"></span>市场价：{{ couponsResult.marketPrice }}元
            </p>
          </template>
          <p>
            <span class="dian"></span>
            有效期：
            <template v-if="couponsResult.lifespanType == 1">
              {{
                couponsResult.lifespanDay == 0 ? '--' : `领券当日${couponsResult.lifespanDay}天有效`
              }}
            </template>
            <template v-else-if="couponsResult.lifespanType == 2">
              {{ couponsResult.lifespanStartTime }}至
              <i class="block not-italic">{{ couponsResult.lifespanEndTime }}</i>
            </template>
          </p>
          <p class="mt-4">风险提示</p>
          <p v-if="couponsResult.limitType == '2'">
            <span class="dian"></span>本次配置将直接影响{{ total }}名用户
          </p>
          <p v-if="totalMoney">
            <span class="dian"></span>错误设置可能导致最高{{ totalMoney }}元资金损失
          </p>
          <div class="mt-5">
            <el-checkbox v-model="checked">我已核对所有参数并知晓风险</el-checkbox>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog_btn">
          <el-button type="primary" @click="handleApprove(1)" :disabled="!checked"
            >确定发布</el-button
          >
          <el-button @click="approveVisible = checked = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 驳回 -->
    <reject-reson-write ref="rejectResonRef" @submit="submitRejects" />
    <!-- 兑换码 -->
    <el-dialog
      v-model="couponsCodeVisible"
      width="40%"
      append-to-body
      :close-on-click-modal="false"
      custom-class="dialog_center dialog_code"
    >
      <div>
        <div class="close flex justify-end mb-3 pt-4 pr-4" @click="couponsCodeVisible = false">
          <img src="@/assets/images/icon/close_icon.png" />
        </div>
        <div class="code_box flex flex-wrap">
          <div v-for="(item, index) in couponsCodeList" :key="index">
            <div class="left_text mr-3 leading-5">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <image-viewer
      v-if="showViewer"
      :on-close="
        () => {
          showViewer = false
        }
      "
      :url-list="viewerImgList"
      :file-name="fileName"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  getApplyCouponsDetails,
  auditOrUnAuditApplyCoupons,
  getCouponsCodeList,
  getOperationList,
} from '@/api/coupon/approval'
import RejectResonWrite from '@/components/Approval/rejectResonWrite.vue'
import { ElMessage } from 'element-plus'
import { useDict } from '@/utils/dict'

// 定义类型
interface CouponData {
  conditionAudit: number
  code: string
  type: string
  name: string
  mname: string
  bname: string
  sourceType: string
  faceValue: string
  faceValueStatus: string
  thresholdAmount: string
  totalCount: string
  dailyLimit: string
  freeHours: string
  createUserName: string
  createTime: string
  remark: string
  limitType: string
  moneyAmount: string
  marketPrice: string
}

interface ResultItem {
  id: number
  groupId: number
  limitType: string
  total: number
  totalStatus: string
  limitUserTotal: number
  lifespanType: number
  lifespanDay: number
  lifespanDayStatus: string
  lifespanStartTime: string
  lifespanStartTimeStatus: string
  lifespanEndTime: string
  lifespanEndTimeStatus: string
  codeLen: number
  applyStadiumType: number
  applyStadiumTypeStatus: string
  applySportType: number
  applySportTypeStatus: string
  limitTimeType: number
  limitTimeTypeStatus: string
  limitStartTime: string
  limitStartTimeStatus: string
  limitEndTime: string
  limitEndTimeStatus: string
  hotEnable: number
  hotEnableStatus: string
  hotSort: number
  hotSortStatus: string
  expiredRefund: number
  expiredRefundStatus: string
  purchaseAmount: string
  purchaseAmountStatus: string
  purchasePrice: string
  purchasePriceStatus: string
  marketPrice: string
  marketPriceStatus: string
  customerPrice: string
  customerPriceStatus: string
  dealerName: string
  createApplyName: string
  createApplyNameStatus: string
  createTime: string
  totalMoney: string
  purchaseMoney: string
  marketMoney: string
  customerMoney: string
  countStadiumNumber: number
  stadiumNameList: string
  diffStadiumNameList: string
  sportTypeNameList: string
  countCouponsUser: number
  qrCodeUrl: string
  backgroundImg: string
}

interface RecordItem {
  id: number
  createTime: string
  userName: string
  stepName: string
  type: number
  stepColor: string
}

interface LimitTypeOption {
  value: string
  label: string
}

// 使用 vue-router
const route = useRoute()
const router = useRouter()

// 字典数据（从全局 mixin 注入）
const { dict }: any = useDict({
  type: 'coupon_type',
})

// 响应式数据
const type = ref<string | null>(null) // "0"优惠券, "1"卡券
const isLoading = ref(false)
const couponId = ref<string | null>(null)
const couponData = ref<Partial<CouponData>>({})
const resultList = ref<ResultItem[]>([])
const recordList = ref<RecordItem[]>([])
const approveVisible = ref(false)
const checked = ref(false)
const rejectReson = ref<string | null>(null)
const total = ref<number | null>(null)
const couponsResult = ref<Partial<ResultItem>>({})
const couponsCodeList = ref<string[]>([])
const couponsCodeVisible = ref(false)
const viewerImgList = ref<string[]>([])
const showViewer = ref(false)
const fileName = ref('')

// 组件引用
const rejectResonRef = ref<InstanceType<typeof RejectResonWrite> | null>(null)

// 计算属性
const totalMoney = computed(() => {
  if (type.value == '0' && couponData.value.type != '2' /* && type.value != '1'*/) {
    return total.value! * Number(couponData.value.moneyAmount)
  } else {
    if (couponsResult.value.marketPrice) {
      return total.value! * Number(couponsResult.value.marketPrice)
    }
  }
  return 0
})

// 方法定义
const getTitle = () => {
  return type.value == '0' ? '优惠券' : '卡券'
}

const getList = async () => {
  isLoading.value = true
  try {
    const { data } = await getApplyCouponsDetails({
      couponId: couponId.value,
    })
    couponData.value = data.couponData
    resultList.value = data.resultList
    resultList.value.forEach((item) => {
      item.stadiumNameList = Array.isArray(item.stadiumNameList)
        ? item.stadiumNameList.join('、')
        : item.stadiumNameList || ''
      item.sportTypeNameList = Array.isArray(item.sportTypeNameList)
        ? item.sportTypeNameList.join('、')
        : item.sportTypeNameList || ''
      item.diffStadiumNameList = Array.isArray(item.diffStadiumNameList)
        ? item.diffStadiumNameList.join('、')
        : item.diffStadiumNameList || ''
    })
    if (resultList.value.length > 0) {
      couponsResult.value = resultList.value[resultList.value.length - 1] as ResultItem
    }
    total.value = couponsResult.value.total || null
  } finally {
    isLoading.value = false
  }
}

// 获取优惠券操作记录
const getRecord = async () => {
  const { data } = await getOperationList({
    couponId: couponId.value,
  })
  recordList.value = data
}

// 颞取方式
const handleLimitType = (val: string) => {
  const item = limitTypeOptions.find((item) => item.value == val)
  return item ? item.label : '--'
}

// 优惠券类型
const handleCouponsType = (val: any) => {
  let label = '--'
  if (type.value == '0') {
    const item = dict?.type?.coupon_type?.find((item: any) => item.value == val)
    label = item ? item.label : '--'
  } else {
    const item = dict?.type?.pass_type.find((item: any) => item.value == val)
    label = item ? item.label : '--'
  }
  return label
}

// 优惠券发布渠道
const handleSourceType = (val: any) => {
  const item = dict?.type?.platform_type.find((item: any) => item.value == val)
  return item ? item.label : '--'
}

// 通过审批
const handleApprove = async (val: number) => {
  const params = {
    couponId: couponId.value,
    auditStatus: val,
    remark: rejectReson.value,
  }
  await auditOrUnAuditApplyCoupons(params)
  ElMessage.success('操作成功')
  router.go(-1)
}

// 驳回审批
const handleRejects = () => {
  if (rejectResonRef.value) {
    rejectResonRef.value.showRejectModal = true
    rejectResonRef.value.form.remark = ''
  }
}

// 确认驳回
const submitRejects = (val: string) => {
  rejectReson.value = val
  handleApprove(2)
}

// 返回
const goBack = () => {
  router.go(-1)
}

// 查看兑换码
const handleLookCode = async (item: ResultItem) => {
  couponsCodeVisible.value = true
  const { data } = await getCouponsCodeList({
    couponId: item.id,
    groupId: item.groupId,
  })
  couponsCodeList.value = data
}

// 指定用户发放优惠券用户导出
const handleExportUser = (item: ResultItem) => {
  // 这里需要实现 download 函数
  // download(
  //   "cj-stadium/sys/coupon/user/export",
  //   {
  //     couponId: item.id,
  //     groupId: item.groupId,
  //   },
  //   `${couponData.value.name}_指定用户.xlsx`
  // )
}

// 查看二维码
const handleQrCode = (item: ResultItem) => {
  showViewer.value = true
  viewerImgList.value = [item.qrCodeUrl]
  fileName.value = `${item.dealerName}_二维码`
}

// 查看活动图
const handleActivityImage = (item: ResultItem) => {
  showViewer.value = true
  viewerImgList.value = [item.backgroundImg]
  fileName.value = `${item.dealerName}_活动图`
}

const limitTypeOptions: LimitTypeOption[] = [
  { value: '1', label: '免费领取' },
  { value: '2', label: '指定发放' },
  { value: '3', label: '兑换领取' },
  { value: '4', label: '二维码领取 ' },
  { value: '5', label: '购买领取' },
]

// 生命周期
onMounted(() => {
  type.value = (route.query.type as string) || null
  couponId.value = (route.query.id as string) || null
  getList()
  getRecord()
})
</script>

<style lang="scss" scoped>
.wrap-container {
  .detail_l {
    flex: 1;
  }
  .approval_btn {
    display: flex;
    justify-content: flex-end;
    .el-button {
      width: 80px;
      height: 32px;
      line-height: 32px;
      border-radius: 6px;
      padding: 0;
      &.el-button--primary {
        background: #0988fb;
        border-color: #0988fb;
      }
      &.el-button--warning {
        background: #ff8d1a;
        border-color: #ff8d1a;
      }
      &.el-button--default {
        border-color: #a6a6a6;
        color: #383838;
        background: #fff;
      }
      & + .el-button {
        margin-left: 12px;
      }
    }
  }
  .block_item {
    background: #fff;
    padding: 15px;
    height: calc(100vh - 151px);
    overflow-y: auto;
    overflow-x: hidden;
    &:not(:first-child) {
      margin-top: 15px;
    }
    .block_top {
      padding-bottom: 9px;
      border-bottom: 1px solid #e5e5e5;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
    }
    .other_cont {
      border-top: 1px solid #a6a6a6;
      padding-top: 26px;
      .el-button {
        width: 95px;
        height: 30px;
        padding: 0;
        line-height: 30px;
        & + .el-button {
          margin-left: 25px;
        }
      }
    }
    :deep(.el-row) {
      .el-col {
        &.el-col-5 {
          width: 20%;
          margin-bottom: 16px;
        }
        div {
          font-size: 14px;
          & > span {
            color: #808080;
          }
          p {
            span:first-child {
              color: #808080;
            }
          }
          .tool_text {
            color: #383838 !important;
          }
        }
      }
    }
  }
  .detail_r {
    margin-left: 15px;
    width: 367px;
    .order_track {
      background: #fff;
      padding: 10px 16px;
      height: calc(100vh - 80px);
      overflow: auto;
      .order_top {
        margin-bottom: 0;
        padding-bottom: 8px;
        border-bottom: 1px solid #e5e5e5;
      }
      .track_list {
        padding: 11px 12px 0;
        .track_item {
          margin-bottom: 11px;
          .create_time {
            color: #808080;
            line-height: 18px;
            font-size: 12px;
            margin-bottom: 2px;
          }
          .track_cont {
            font-size: 14px;
            line-height: 21px;
            margin: 2px 0;
            span {
              margin: 0 8px;
            }
          }
        }
      }
    }
  }
}
:deep(.dialog_center) {
  .el-dialog__header {
    padding: 22px 30px 0;
  }
  .el-dialog__body {
    padding: 15px 30px;
  }
  .dialog_top {
    display: flex;
    align-items: center;
    line-height: 24px;
    img {
      width: 20px;
      height: 17px;
    }
    span {
      font-size: 16px;
      color: #000;
      margin-left: 9px;
    }
  }
  .tips_cont {
    font-size: 14px;
    color: #000;
    line-height: 21px;
    p {
      display: flex;
      align-items: center;
      line-height: 18px;
      font-size: 12px;
      .dian {
        display: block;
        width: 5px;
        height: 5px;
        background: #383838;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
    .el-checkbox {
      color: #383838;
    }
  }
  .dialog_btn {
    display: flex;
    justify-content: flex-end;
    .el-button {
      border-radius: 6px;
      width: 89px;
      height: 32px;
      line-height: 32px;
      padding: 0;
      & + .el-button {
        width: 66px;
        margin-left: 22px;
      }
      &.el-button--default {
        background: none;
        border: 1px solid #e5e5e5;
        color: #383838;
      }
    }
  }
}
:deep(.dialog_code) {
  border-radius: 4px;
  border: 1px solid #a6a6a6;
  padding: 0 0 16px 16px;
  min-height: 230px;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0;
  }
}
</style>
